<template>
  <div>
      <crud-table apiModel="/api/member-cards"
        ref="cardRef"
        :cols="cols"
        :searchFilter="searchFilter"
        :editForm="editForm"
        :showOption="true"
        :options="options"
        :showTools="false"
        :showSummary="showSummary"
      >
        <template #tools>
          <el-tooltip class="item" effect="dark" content="批量开卡" placement="top-start">
            <el-button circle icon="el-icon-thumb" @click="showBatch=true" size="small"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="导出" placement="top-start">
            <el-button circle icon="el-icon-download" @click="onExport" size="small"></el-button>
          </el-tooltip>
          <card-form ref="cardForm" @refresh="onRefresh"></card-form>
        </template>
      </crud-table>
      <change-account ref="account" v-model="showAccount" :current="currentObj" @onRefresh="onRefresh"></change-account>
      <batch-form v-model="showBatch"></batch-form>
  </div>
</template>

<script>
  import CrudTable from "@/components/CrudTable";
  import ChangeAccount from "@/components/ChangeAccount/index.vue";
  import CardForm from '@/components/card/form'
  import BatchForm from '@/components/card/batchForm.vue'
  export default {
      name: "memberCard",
      components:{CrudTable,ChangeAccount,CardForm,BatchForm},
      props:{
          showSummary:{
              type:Boolean,
              default:true
          }
      },
      data(){
        return{
          /*操作列表*/
          options: [
              { label: "管理", method: this.onChange,type: "default"},
              { label: "编辑", method: this.onEdit,type: "primary"},
              { label: "删除", method: "onDelete",type: "danger"}
          ],
          /*搜索框*/
          searchFilter: [
              { title: "持卡人卡号/手机号", field: "keyword", widget: "input" },
              { title: "持卡人姓名", field: "name", widget: "input" },
              { title: "绑定小程序", field: "type", widget: "select",options:[{label:'已绑定小程序',value:1}] },
          ],
          /*编辑内容框*/
          editForm:[
              {title: '卡号', field: 'card_sn',widget:'input'},
              {title: '持卡人', field: 'name',widget:'input'},
              {title: '手机号', field: 'mobile',widget:'input'},
              {title: '会员ID', field: 'uid',widget:'input'},
          ],
          /*列表显示框*/
          cols: [
              { title: "ID", field: "id", width: '10%'},
              { title: "卡号", field: "card_sn", width: '10%' },
              { title: "状态", field: "status", width: '10%',type:'switch' },
              { title: "持卡人", field: "name", width: '10%' },
              { title: "手机号", field: "mobile", width: '10%' },
              { title: "余额", field: "money", width: '10%' ,props:{sortable:'custom'}},
              { title: "积分", field: "score", width: '10%',props:{sortable:'custom'}},
              // { title: "出生日期", field: "birthday", width: 80 },
              { title: "性别", field: "sex", width: '10%',type:'tag',options:['未知','男','女']},
              { title: "备注", field: "remark", width: '10%' },
              { title: "会员ID", field: "uid", width: '10%' }
          ],
          showAccount:false,
          showBatch:false,
          currentObj: {
            card_sn: '11',
            name: '111',
            mobile: '111',
            money: '111',
            score: '111',
            remark: '111'
          },//当前会员信息
        }
      },
      methods:{
          onChange(row){
              this.showAccount = true
              console.log('row--', row)
              // this.$store.dispatch('card/selectCard',row)
          },
          onRefresh(){
              this.showAccount = false
              this.$refs.cardRef.getList()
          },
          onEdit(row){
              this.$refs['cardForm'].editDialog = true
              delete row['password']
              this.$refs['cardForm'].postForm = row
          },
          onBatchAdd(){

          },
          onExport(){
              this.$http.post('/api/member-cards/export').then(ret=> {
                  window.open(ret.data.file, '_blank');
              })

              //     if (!res) {
              //         this.$message.error("下载文件失败");
              //         return false;
              //     }
              //     const blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
              //     const downloadElement = document.createElement('a');
              //     const href = window.URL.createObjectURL(blob);
              //     let contentDisposition = res.headers['content-disposition'];  //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
              //     let patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
              //     let result = patt.exec(contentDisposition);
              //     let filename = decodeURI(result[1]);
              //     downloadElement.style.display = 'none';
              //     downloadElement.href = href;
              //     downloadElement.download = filename ; //下载后文件名
              //     document.body.appendChild(downloadElement);
              //     downloadElement.click(); //点击下载
              //     document.body.removeChild(downloadElement); //下载完成移除元素
              //     window.URL.revokeObjectURL(href); //释放掉blob对象
              // })
          }
      }
  }
</script>

<style scoped>

</style>